<template>
    <div>
        <div class="card">
            <div class="card-header d-flex align-items-center gap-3"><img src="../../../assets/images/info.svg"
                    alt=""><span>我的订单</span></div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="全部订单" name="0">
                                <div class="single">
                                    <div class="single-item" v-for="(item, index) in 2" :key="index">
                                        <div class="single-item-header d-flex justify-content-between">
                                            <div class="d-flex align-items-center gap-4">
                                                <span>订单：123214352354</span>
                                                <span>状态：已取消</span>
                                                <span>日期：2024-01-06 12:08:34</span>
                                            </div>
                                            <span>合计：￥68</span>
                                        </div>
                                        <div class="single-item-body">
                                            <div class="single-item-body-item d-flex align-items-center justify-content-between mt-2"
                                                v-for="(item, index) in 2" :key="index">
                                                <img src="../../../assets/images/sp1.jpg" alt="">
                                                <span>麦富迪 宠物狗粮 牛肉双拼通用成犬粮</span>
                                                <span>68 x 1</span>
                                                <span>￥ 68</span>
                                            </div>
                                        </div>
                                        <div class="single-item-footer d-flex justify-content-end">
                                            <span class="look">查看</span>
                                        </div>

                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="已取消" name="1">已取消</el-tab-pane>
                            <el-tab-pane label="等待中" name="2">等待中</el-tab-pane>
                            <el-tab-pane label="已结束" name="3">已结束</el-tab-pane>
                        </el-tabs> -->

                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="全部订单" name="0">
                                <div class="single">
                                    <OrderItem v-for="(item, index) in orders.all" :key="index" :item="item"
                                        :index="index" @view-order="viewOrder"></OrderItem>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="已取消" name="1">
                                <div class="single">
                                    <OrderItem v-for="(item, index) in orders.canceled" :key="index" :item="item"
                                        :index="index" @view-order="viewOrder"></OrderItem>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="等待中" name="2">
                                <div class="single">
                                    <OrderItem v-for="(item, index) in orders.pending" :key="index" :item="item"
                                        :index="index" @view-order="viewOrder"></OrderItem>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="已结束" name="3">
                                <div class="single">
                                    <OrderItem v-for="(item, index) in orders.completed" :key="index" :item="item"
                                        :index="index" @view-order="viewOrder"></OrderItem>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import OrderItem from './OrderItem.vue';
export default {
    name: 'Order',
    components: {
        OrderItem
    },
    data() {
        return {
            activeName: '0',
            orders: {
                all: [
                    {
                        orderId: '123456789012',
                        status: '已取消',
                        date: '2024-01-06 12:08:34',
                        total: 68,
                        products: [
                            {
                                image: require('../../../assets/images/sp1.jpg'),
                                name: '麦富迪 宠物狗粮 牛肉双拼通用成犬粮',
                                quantity: 1,
                                price: 68,
                                total: 68
                            }
                        ]
                    },
                    {
                        orderId: '123456789013',
                        status: '等待中',
                        date: '2024-01-05 09:15:22',
                        total: 150,
                        products: [
                            {
                                image: require('../../../assets/images/sp2.jpg'),
                                name: '皇家宠物猫粮 成猫专用',
                                quantity: 2,
                                price: 75,
                                total: 150
                            }
                        ]
                    },
                    {
                        orderId: '123456789014',
                        status: '已结束',
                        date: '2024-01-04 14:48:12',
                        total: 220,
                        products: [
                            {
                                image: require('../../../assets/images/sp3.jpg'),
                                name: '宠物玩具 狗狗飞盘',
                                quantity: 1,
                                price: 50,
                                total: 50
                            },
                            {
                                image: require('../../../assets/images/sp4.jpg'),
                                name: '猫咪磨爪棒',
                                quantity: 2,
                                price: 85,
                                total: 170
                            }
                        ]
                    },
                    {
                        orderId: '123456789015',
                        status: '已结束',
                        date: '2024-01-03 18:30:45',
                        total: 90,
                        products: [
                            {
                                image: require('../../../assets/images/sp5.jpg'),
                                name: '宠物营养补充剂',
                                quantity: 3,
                                price: 30,
                                total: 90
                            }
                        ]
                    }
                ],
                canceled: [
                    {
                        orderId: '123456789012',
                        status: '已取消',
                        date: '2024-01-06 12:08:34',
                        total: 68,
                        products: [
                            {
                                image: require('../../../assets/images/sp1.jpg'),
                                name: '麦富迪 宠物狗粮 牛肉双拼通用成犬粮',
                                quantity: 1,
                                price: 68,
                                total: 68
                            }
                        ]
                    }
                ],
                pending: [
                    {
                        orderId: '123456789013',
                        status: '等待中',
                        date: '2024-01-05 09:15:22',
                        total: 150,
                        products: [
                            {
                                image: require('../../../assets/images/sp2.jpg'),
                                name: '皇家宠物猫粮 成猫专用',
                                quantity: 2,
                                price: 75,
                                total: 150
                            }
                        ]
                    }
                ],
                completed: [
                    {
                        orderId: '123456789014',
                        status: '已结束',
                        date: '2024-01-04 14:48:12',
                        total: 220,
                        products: [
                            {
                                image: require('../../../assets/images/sp3.jpg'),
                                name: '宠物玩具 狗狗飞盘',
                                quantity: 1,
                                price: 50,
                                total: 50
                            },
                            {
                                image: require('../../../assets/images/sp4.jpg'),
                                name: '猫咪磨爪棒',
                                quantity: 2,
                                price: 85,
                                total: 170
                            }
                        ]
                    },
                    {
                        orderId: '123456789015',
                        status: '已结束',
                        date: '2024-01-03 18:30:45',
                        total: 90,
                        products: [
                            {
                                image: require('../../../assets/images/sp5.jpg'),
                                name: '宠物营养补充剂',
                                quantity: 3,
                                price: 30,
                                total: 90
                            }
                        ]
                    }
                ]
            }
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        viewOrder(item) {
            console.log('View order:', item);
        }
    }
}
</script>

<style scoped>
.card {
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0;
}

.card-header {
    height: 60px;
    background-color: white;
    color: #333;
    font-size: 16px;
}

.card-header img {
    width: 18px;
}

.card-body {
    padding: 0;
}

:deep(.el-tabs__nav-wrap) {
    padding-left: 2rem;
}

.single {
    /* border-top: 1px solid rgba(0, 0, 0, .15); */
    border-bottom: 1px solid rgba(0, 0, 0, .15);
}

/* .single-item-header {
    padding: .6rem 2rem;
    border-top: 1px solid rgba(0, 0, 0, .15);
}

.single-item-body img {
    width: 90px;
    height: 90px;
}

.single-item-body {
    border-top: 1px solid rgba(0, 0, 0, .15);
    border-bottom: 1px solid rgba(0, 0, 0, .15);
}

.single-item-body-item {
    padding-left: 2rem;
    padding-right: 2rem;
}

.single-item-footer {
    padding: .4rem 2rem;
}

.single-item-footer .look {
    color: white;
    background: rgba(255, 144, 3);
    height: 21px;
    width: 42px;
    text-align: center;
    line-height: 21px;
    font-size: 16px;
} */
</style>